<template>
    <div class="home">
        <!-- 英雄区域 - 添加了动画效果和CTA按钮 -->
        <section class="hero">
            <div class="hero-content">
                <h1>探索世界的美丽</h1>
                <p>发现最适合您的旅行目的地</p>
                <SearchBar />
                <button class="cta-button">
                    开始探索
                    <span class="arrow">→</span>
                </button>
            </div>
            <div class="scroll-indicator" @click="scrollToContent">
                <span></span>
            </div>
        </section>

        <!-- 热门目的地 - 添加了滑动导航 -->
        <section class="section popular-destinations" ref="contentSection">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">热门目的地</h2>
                    <div class="section-nav">
                        <button @click="scrollDestinations(-1)" class="nav-arrow">←</button>
                        <button @click="scrollDestinations(1)" class="nav-arrow">→</button>
                    </div>
                </div>
                <div class="destinations-grid" ref="destinationsGrid">
                    <DestinationCard v-for="destination in popularDestinations" :key="destination.id"
                        :destination="destination" />
                </div>
                <button class="view-all">查看全部目的地</button>
            </div>
        </section>

        <!-- 特色旅游 - 添加了标签分类 -->
        <section class="section featured-tours">
            <div class="container">
                <h2 class="section-title">特色旅游</h2>
                <div class="tabs">
                    <button v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }"
                        @click="activeTab = index">
                        {{ tab }}
                    </button>
                </div>
                <div class="tours-grid">
                    <div class="tour-card" v-for="i in 3" :key="i">
                        <div class="tour-image"></div>
                        <div class="tour-info">
                            <h3>精选欧洲7日游</h3>
                            <div class="tour-meta">
                                <span class="duration">7天6晚</span>
                                <span class="price">¥6,999起</span>
                            </div>
                            <div class="tour-highlights">
                                <span>包含机票</span>
                                <span>4星酒店</span>
                                <span>中文导游</span>
                            </div>
                            <button class="tour-button">立即预订</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 用户评价 - 添加了评分系统 -->
        <section class="section testimonials">
            <div class="container">
                <h2 class="section-title">旅行者评价</h2>
                <div class="testimonials-grid">
                    <Testimonial v-for="testimonial in testimonials" :key="testimonial.id" :testimonial="testimonial" />
                </div>
                <div class="rating-overview">
                    <div class="average-rating">
                        <span class="stars">★★★★★</span>
                        <span class="score">4.8/5</span>
                    </div>
                    <p>基于1,258条真实评价</p>
                    <button class="leave-review">留下您的评价</button>
                </div>
            </div>
        </section>

        <!-- 新增的订阅区域 -->
        <section class="newsletter">
            <div class="container">
                <h3>订阅获取独家旅行优惠</h3>
                <p>第一时间获取限时折扣和旅行灵感</p>
                <form @submit.prevent="subscribe">
                    <input type="email" placeholder="您的电子邮箱" required>
                    <button type="submit">订阅</button>
                </form>
            </div>
        </section>
    </div>
</template>

<script>
    import SearchBar from '@/components/SearchBar.vue'
    import DestinationCard from '@/components/DestinationCard.vue'
    import appTestimonial from '@/components/Testimonial.vue'

    export default {
        name: 'appHome',
        components: {
            SearchBar,
            DestinationCard,
            Testimonial
        },
        data() {
            return {
                popularDestinations: [
                    {
                        id: 1,
                        name: '巴黎',
                        image: require('@/assets/paris.jpg'),
                        description: '浪漫之都，艺术与美食的天堂',
                        price: '¥5,999起',
                        tags: ['浪漫', '城市', '文化']
                    },
                    {
                        id: 2,
                        name: '东京',
                        image: require('@/assets/tokyo.jpg'),
                        description: '传统与现代的完美融合',
                        price: '¥4,599起',
                        tags: ['城市', '美食', '购物']
                    },
                    {
                        id: 3,
                        name: '马尔代夫',
                        image: require('@/assets/maldives.jpg'),
                        description: '天堂般的海岛度假胜地',
                        price: '¥8,999起',
                        tags: ['海岛', '蜜月', '潜水']
                    },
                    {
                        id: 4,
                        name: '纽约',
                        image: require('@/assets/newyork.jpg'),
                        description: '不夜城，世界文化大熔炉',
                        price: '¥6,499起',
                        tags: ['城市', '购物', '文化']
                    }
                ],
                testimonials: [
                    {
                        id: 1,
                        name: '张先生',
                        avatar: require('@/assets/avatar1.jpg'),
                        comment: '通过TravelEase预订的巴黎之旅非常完美，服务周到，行程安排合理。',
                        rating: 5
                    },
                    {
                        id: 2,
                        name: '李女士',
                        avatar: require('@/assets/avatar2.jpg'),
                        comment: '马尔代夫的度假村超出预期，海水清澈见底，服务一流。',
                        rating: 5
                    },
                    {
                        id: 3,
                        name: '王先生',
                        avatar: require('@/assets/avatar3.jpg'),
                        comment: '东京的美食之旅让我们大开眼界，导游非常专业。',
                        rating: 4
                    }
                ],
                tabs: ['全部', '海岛度假', '城市探索', '冒险之旅'],
                activeTab: 0
            }
        },
        methods: {
            scrollToContent() {
                this.$refs.contentSection.scrollIntoView({ behavior: 'smooth' });
            },
            scrollDestinations(direction) {
                const grid = this.$refs.destinationsGrid;
                grid.scrollBy({ left: direction * 300, behavior: 'smooth' });
            },
            subscribe() {
                // 订阅逻辑
            }
        }
    }
</script>

<style scoped>
    /* 基础样式 */
    :root {
        --primary-color: #4a6bff;
        --secondary-color: #ff7e5f;
        --dark-color: #2d3436;
        --light-color: #f5f6fa;
        --text-color: #636e72;
        --white: #ffffff;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        --border-radius: 12px;
        --transition: all 0.3s ease;
    }

    .home {
        overflow-x: hidden;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .section {
        padding: 80px 0;
    }

    .section-title {
        text-align: center;
        margin-bottom: 40px;
        font-size: 2.2rem;
        color: var(--dark-color);
        position: relative;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    }

    /* 英雄区域 */
    .hero {
        height: 90vh;
        min-height: 700px;
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('@/assets/hero-bg.jpg') no-repeat center center/cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--white);
        position: relative;
    }

    .hero-content {
        max-width: 800px;
        padding: 0 20px;
    }

    .hero-content h1 {
        font-size: 3.5rem;
        margin-bottom: 20px;
        font-weight: 700;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .hero-content p {
        font-size: 1.5rem;
        margin-bottom: 40px;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .cta-button {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 12px 28px;
        font-size: 1rem;
        border-radius: 50px;
        cursor: pointer;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        margin-top: 30px;
        box-shadow: 0 4px 15px rgba(74, 107, 255, 0.4);
    }

    .cta-button:hover {
        background: #3a5bef;
        transform: translateY(-3px);
    }

    .cta-button .arrow {
        margin-left: 8px;
        transition: var(--transition);
    }

    .cta-button:hover .arrow {
        transform: translateX(5px);
    }

    .scroll-indicator {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        animation: bounce 2s infinite;
    }

    .scroll-indicator span {
        display: block;
        width: 26px;
        height: 40px;
        border: 2px solid var(--white);
        border-radius: 13px;
        position: relative;
    }

    .scroll-indicator span::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 5px;
        height: 5px;
        background: var(--white);
        border-radius: 50%;
        animation: scroll 2s infinite;
    }

    @keyframes bounce {

        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateY(0) translateX(-50%);
        }

        40% {
            transform: translateY(-15px) translateX(-50%);
        }

        60% {
            transform: translateY(-7px) translateX(-50%);
        }
    }

    @keyframes scroll {
        0% {
            opacity: 1;
            top: 8px;
        }

        100% {
            opacity: 0;
            top: 24px;
        }
    }

    /* 热门目的地 */
    .popular-destinations {
        background-color: var(--light-color);
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .section-nav {
        display: flex;
        gap: 10px;
    }

    .nav-arrow {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--white);
        border: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
    }

    .nav-arrow:hover {
        background: var(--primary-color);
        color: var(--white);
        border-color: var(--primary-color);
    }

    .destinations-grid {
        display: flex;
        gap: 25px;
        overflow-x: auto;
        padding-bottom: 20px;
        scrollbar-width: none;
    }

    .destinations-grid::-webkit-scrollbar {
        display: none;
    }

    .view-all {
        display: block;
        margin: 40px auto 0;
        background: transparent;
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
        padding: 10px 25px;
        border-radius: 50px;
        cursor: pointer;
        transition: var(--transition);
        font-weight: 500;
    }

    .view-all:hover {
        background: var(--primary-color);
        color: var(--white);
    }

    /* 特色旅游 */
    .featured-tours {
        background-color: var(--white);
    }

    .tabs {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }

    .tabs button {
        padding: 8px 16px;
        border: none;
        background: transparent;
        color: var(--text-color);
        border-radius: 50px;
        cursor: pointer;
        transition: var(--transition);
        font-weight: 500;
    }

    .tabs button.active {
        background: var(--primary-color);
        color: var(--white);
    }

    .tabs button:hover:not(.active) {
        color: var(--primary-color);
    }

    .tours-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 25px;
    }

    .tour-card {
        background: var(--white);
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: var(--transition);
    }

    .tour-card:hover {
        transform: translateY(-5px);
    }

    .tour-image {
        height: 180px;
        background: linear-gradient(to right, #4facfe, #00f2fe);
    }

    .tour-info {
        padding: 18px;
    }

    .tour-info h3 {
        margin-bottom: 12px;
        color: var(--dark-color);
    }

    .tour-meta {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        color: var(--text-color);
        font-size: 0.9rem;
    }

    .tour-highlights {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 18px;
    }

    .tour-highlights span {
        background: #f0f4ff;
        color: var(--primary-color);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
    }

    .tour-button {
        width: 100%;
        padding: 10px;
        background: var(--primary-color);
        color: var(--white);
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: var(--transition);
        font-weight: 500;
    }

    .tour-button:hover {
        background: #3a5bef;
    }

    /* 用户评价 */
    .testimonials {
        background-color: var(--light-color);
    }

    .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
    }

    .rating-overview {
        text-align: center;
        margin-top: 40px;
    }

    .average-rating {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .stars {
        color: #ffc107;
        font-size: 1.5rem;
    }

    .score {
        font-weight: 600;
        color: var(--dark-color);
    }

    .leave-review {
        margin-top: 20px;
        padding: 8px 20px;
        background: transparent;
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
        border-radius: 50px;
        cursor: pointer;
        transition: var(--transition);
    }

    .leave-review:hover {
        background: var(--primary-color);
        color: var(--white);
    }

    /* 订阅区域 */
    .newsletter {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: var(--white);
        padding: 60px 0;
        text-align: center;
    }

    .newsletter h3 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    .newsletter p {
        margin-bottom: 25px;
        opacity: 0.9;
    }

    .newsletter form {
        display: flex;
        max-width: 500px;
        margin: 0 auto;
    }

    .newsletter input {
        flex: 1;
        padding: 12px 16px;
        border: none;
        border-radius: 50px 0 0 50px;
        font-size: 1rem;
    }

    .newsletter button {
        padding: 12px 25px;
        background: var(--dark-color);
        color: var(--white);
        border: none;
        border-radius: 0 50px 50px 0;
        cursor: pointer;
        transition: var(--transition);
    }

    .newsletter button:hover {
        background: #1e272e;
    }

    @media (max-width: 768px) {
        .hero-content h1 {
            font-size: 2.5rem;
        }

        .hero-content p {
            font-size: 1.2rem;
        }

        .section-title {
            font-size: 1.8rem;
        }

        .tours-grid {
            grid-template-columns: 1fr;
        }

        .newsletter form {
            flex-direction: column;
        }

        .newsletter input,
        .newsletter button {
            border-radius: 50px;
        }

        .newsletter button {
            margin-top: 10px;
        }
    }
</style>